<template>
    <div>
        <h1>新增机构信息</h1>
        <table class="table">
            <tbody>
                <tr>
                    <th>机构名称</th>
                    <th>
                        <input type="text" v-model="data.JoinName">
                    </th>
                </tr>
                <tr>
                    <th>服务类型</th>
                    <th>
                        <select v-model="data.ServerId">
                            <option value="0">==请选择==</option>
                            <option v-for="a in datas" :value="a.ServerId">{{ a.ServerName }}</option>
                        </select>
                    </th>
                </tr>
                <tr>
                    <th>上传图片</th>
                    <th>
                        <input type="file" @change="UpFile">
                        <img :src="'https://localhost:7018/'+data.img" width="100" height="100" alt="">
                    </th>
                </tr>
                <tr>
                    <th>地址</th>
                    <th>
                        <input type="text" v-model="data.Addr">
                    </th>
                </tr>
                <tr>
                    <th>手机号</th>
                    <th>
                        <input type="text" v-model="data.Phone">
                    </th>
                </tr>
                <tr>
                    <th>详情</th>
                    <th>
                        <textarea v-model="data.XQ"></textarea>
                    </th>
                </tr>
                <tr>
                    <th>状态</th>
                    <th>
                        <input type="radio" name="state" v-model="data.State" :value="true">已发布
                        <input type="radio" name="state" v-model="data.State" :value="false">未发布
                    </th>
                </tr>
                <tr>
                    <th colspan="2">
                        <input type="button" value="保存" @click="Add">
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
    import { ref,onMounted } from 'vue';
    import axios from 'axios';
    import { useRouter } from 'vue-router';
import router from '@/router';
    const Router = useRouter()
    const data = ref({
    "Id": 0,
    "JoinName": "",
    "ServerId": 0,
    "img": "",
    "Addr": "",
    "Phone": "",
    "XQ": "",
    "IsDel": true,
    "State": true
    })
    const datas = ref([{
    "ServerId": 0,
    "ServerName": ""
    }])
    onMounted(()=>{
        datatype()
    })
    const UpFile=(e:any)=>{
        var f = e.target.files[0]
        var fd = new FormData
        fd.append("file",f)
        axios.post("https://localhost:7018/api/User/UpFile",fd).then(res=>{
            data.value.img = res.data
        })
    }
    const datatype=()=>{
        axios.post("https://localhost:7018/api/User/GetServer").then(res=>{
            datas.value = res.data
        })
    }
    const Add=()=>{
        if(data.value.JoinName==""){
            alert('机构名称不能为空')
            return
        }
        if(data.value.Addr==""){
            alert('地址不能为空')
            return
        }
        if(data.value.ServerId==0){
            alert('请选择服务类型')
            return
        }
        if(data.value.Phone==""){
            alert('手机号不能为空')
            return
        }
        if(data.value.XQ==""){
            alert('详情不能为空')
            return
        }
        axios.post("https://localhost:7018/api/User/AddJoin",data.value).then(res=>{
            if(res.data>0){
                alert('添加成功')
                router.push({path:"/ShowJoin"})

            }
            else{
                alert('添加失败')
            }
        })
    }
</script>

<style scoped>

</style>